<template>
    <div class="main-box">
        <div>
            <MoodleTabs :list="tabsList" active="2" />
            <h2>{{ $t('question.category.title') }}</h2>
            <div class="tools-box">
                <el-button color="#f06423" @click="addHandle">{{ $t('question.category.add_category') }}</el-button>
            </div>
            <el-tree :data="categoryList" node-key="id" :props="defaultProps" default-expand-all :expand-on-click-node="false" draggable :allow-drop="allowDrop" v-loading="loading">
                <template #default="{ node, data }">
                    <div class="custom-tree-node">
                        <span>{{ data.name }}</span>
                        <div class="tools-box">
                            <el-icon size="18" @click="addHandle(data)"><Plus /></el-icon>
                            <el-icon size="18" @click="delHandle(data)"><Delete /></el-icon>
                            <el-icon size="18" @click="editHandle(data)"><Edit /></el-icon>
                        </div>
                    </div>
                </template>
            </el-tree>
        </div>

        <el-dialog v-model="addDialog" title="新增分类" width="600" class="mobile-dialog">
            <el-form :model="categoryInfo" label-position="top">
                <el-form-item :label="$t('question.category.name')" size="large" prop="name">
                    <el-input v-model="categoryInfo.name" :placeholder="$t('question.category.name_placeholder')" />
                </el-form-item>
                <el-form-item :label="$t('question.category.description')" size="large" prop="description">
                    <RichTextEditor v-model="categoryInfo.description" @update-richValue="categoryInfo.description = $event" />
                </el-form-item>
                <el-form-item :label="$t('question.category.parent')" size="large" prop="description">
                    <el-tree-select
                        :placeholder="$t('question.category.parent_placeholder')"
                        v-model="categoryInfo.parent_id"
                        :data="categoryList"
                        :render-after-expand="false"
                        :props="quizProps"
                        node-key="id"
                        clearable
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button color="#f06423" @click="saveHandle" :loading="addDialogLoading">{{ $t('question.category.save') }}</el-button>
                <el-button color="#435764" @click="addDialog = false" :loading="addDialogLoading">{{ $t('question.category.cancel') }}</el-button>
            </template>
        </el-dialog>

        <el-dialog v-model="deleteDialog" :title="$t('question.category.delete_title')" width="400" class="mobile-dialog">
            <p>{{ $t('question.category.delete_confirm', { name: checkedCategory?.name }) }}</p>
            <template #footer>
                <el-button color="#f06423" @click="confirmHandle" :loading="delDialogLoading">{{ $t('question.category.confirm') }}</el-button>
                <el-button color="#435764" @click="deleteDialog = false" :loading="delDialogLoading">{{ $t('question.category.cancel') }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import RichTextEditor from '@/components/RichTextEditor.vue'
import MoodleTabs from '@/components/MoodleTabs.vue'

import type { CateCreateItem, CateItem } from '@/types/question'
import QuestionService from '@/api/question'

const loading = ref(false)
const tabsList = ref([
    {
        text: 'question.category.tab_question',
        value: '1',
        link: `/console/question`,
    },
    {
        text: 'question.category.tab_category',
        value: '2',
        link: `/console/question/category`,
    },
    {
        text: 'question.category.tab_import',
        value: '3',
        link: ``,
    },
    {
        text: 'question.category.tab_export',
        value: '4',
        link: ``,
    },
])

const defaultProps = {
    id: 'id',
    children: 'children',
    label: 'name',
}

const categoryList = ref<CateItem[]>([])
const checkedCategory = ref<CateItem>()
function getQuestionCateList() {
    loading.value = true
    QuestionService.cateList()
        .then(res => {
            categoryList.value = res.items
        })
        .finally(() => {
            loading.value = false
        })
}
const delHandle = (category: CateItem) => {
    checkedCategory.value = category
    deleteDialog.value = true
}
const addHandle = (category?: CateItem) => {
    addDialog.value = true
    if (category) {
        checkedCategory.value = category
        categoryInfo.value = {
            name: '',
            description: '',
            parent_id: category.id,
        }
    } else {
        checkedCategory.value = undefined
    }
}
const editHandle = (category: CateItem) => {
    addDialog.value = true
    checkedCategory.value = category
    categoryInfo.value = {
        id: category.id,
        name: category.name,
        description: category.description,
        parent_id: category.parent_id,
    }
}
const allowDrop = (draggingNode: any, dropNode: any, type: 'prev' | 'inner' | 'next') => {
    return draggingNode.parent?.data.id === dropNode.parent?.data.id && type !== 'inner'
}

// 新增弹窗
const addDialog = ref(false)
const addDialogLoading = ref(false)
const categoryInfo = ref<CateCreateItem>({
    name: '',
    description: '',
    parent_id: null,
})
const quizProps = {
    id: 'id',
    children: 'children',
    label: 'name',
}
const saveHandle = () => {
    addDialogLoading.value = true
    QuestionService.createCate(categoryInfo.value)
        .then(() => {
            addDialog.value = false
            getQuestionCateList()
        })
        .finally(() => {
            addDialogLoading.value = false
        })
}

// 删除确认弹窗
const deleteDialog = ref(false)
const delDialogLoading = ref(false)
const confirmHandle = () => {
    if (!checkedCategory.value) return
    delDialogLoading.value = true
    QuestionService.deleteCate([checkedCategory.value?.id])
        .then(() => {
            deleteDialog.value = false
            getQuestionCateList()
        })
        .finally(() => {
            delDialogLoading.value = false
        })
}

onMounted(() => {
    getQuestionCateList()
})
</script>

<style lang="less" scoped>
.main-box {
    width: 100%;

    h2 {
        margin-bottom: 30px;
        font-size: 30px;
        font-weight: normal;
        line-height: 1.2;
        color: #000;
    }

    .el-tree {
        margin-top: 15px;
        --el-tree-node-content-height: 34px;
    }

    .custom-tree-node {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
    }

    .tools-box {
        padding-right: 10px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;

        .el-icon {
            cursor: pointer;
            color: #000;

            &:hover {
                color: #f06423;
            }
        }
    }
    :deep(.ck-editor) {
        width: 100%;

        .ck-editor__main {
            .ck-content {
                height: 200px;
            }
        }
    }
}
</style>
